<template>
  <div class="merchant_detail">
       <h4>商户列表 > 商户详情</h4>
       <div class="container" style="padding:0;">
           <!-- 基础信息 -->
            <div class="baseInfo">
                 <h4>基础信息</h4>
                 <div class="info">
                     <div class="info_left">
                         <img :src="merchantInfo.avatar" style="width:100px;height:100px;" />
                     </div>
                     <div class='info_right'>
                         <div>注册手机：{{merchantInfo.tel}}</div> 
                         <div>注册时间：{{merchantInfo.addTime}}</div>   
                         <div>地区：{{merchantInfo.merchantAddress}}</div>
                     </div>
                       
                 </div>
            </div>
            <!-- store_info -->
            <div class="store_info">
               <h4>商铺信息</h4>  
                <div class="info">
                     <div>商铺名称：{{merchantInfo.merchantName}}</div> 
                      <div>联系人：{{merchantInfo.linkMan}}</div>   
                      <div>联系电话：{{merchantInfo.tel}}</div> 
                      <div>邀请码：{{ merchantInfo.inviteCode}}</div>   
                 </div>
                 <div class="info">
                      <div>地区：{{merchantInfo.merchantAddress}}</div>  
                 </div>
                 <div class="info"> 
                      <div>详细地址：{{merchantInfo.detailAddress}}</div> 
                      <el-button type="text" @click="merchantUpdata" style="color:blue">修改</el-button>
                      <!-- <el-button type="primary" style='height:40px;width:60px;margin-left:200px;' @click="merchantUpdata">修改</el-button>  -->
                 </div>
            </div>
            <!-- 收货地址 -->
            <div class="store_info">
               <h4>收货地址</h4>  
               <ul>
                   <li v-if="defaultReceiveList.length > 0">
                        <div class="info">
                            <div>收货人：{{defaultReceiveList[0].receiveMan}}</div> 
                            <div>收货电话：{{defaultReceiveList[0].receiveTel}}</div>   
                        </div>
                        <div class="info">
                            <div>收货地区：{{defaultReceiveList[0].receiveAddress}}</div>  
                        </div>
                   </li>
                    <li v-for="item in  notDefaultReceiveList" :key="item.id">
                      <div class="info">
                        <div>收货人：{{item.receiveMan}}</div> 
                        <div>收货电话：{{item.receiveTel}}</div>   
                    </div>
                    <div class="info">
                        <div>收货地区：{{item.receiveAddress}}</div>  
                    </div>
                   </li>
               </ul>
                
            </div>
            <!-- 统计信息 -->
            <div class="statistics_info">
                <h4>统计信息</h4>  
                <div class="info">
                     <div>购买量：{{MerchantBuyAmount}}斤</div> 
                      <div>购买支出：￥{{merchantPayMoney}}元</div>  
                 </div>
                 <div class="info">
                      <div>钱包充值：￥{{merchantRecharge}}元</div>  
                       <div>钱包余额：￥{{merchantInfo.balance}}元</div>  
                 </div>
            </div>

       </div>
        <!-- 点击修改（修改的对话框） -->
          <el-dialog  title="修改认证信息"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-form :model="updateMerchantForm" label-width="80px" :rules="rules" ref="rulesForm">
            <el-form-item  label="店铺名称" prop="merchantName">
                <el-input  v-model="updateMerchantForm.merchantName"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="linkMan">
                <el-input  v-model="updateMerchantForm.linkMan"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="tel">
                <el-input v-model="updateMerchantForm.tel" ></el-input>
            </el-form-item>
            <el-form-item label="邀请码" prop="inviteCode">
                <el-input  v-model="updateMerchantForm.inviteCode" ></el-input>
            </el-form-item>
            <el-form-item label="地区" prop="selected">
                  <div class="areaBox" style="display:inline-block;padding-top:8px;height:34px;">
                     <area-select :level="2" v-model="updateMerchantForm.selected" :data="$pcaa" :value="updateMerchantForm.selected"></area-select> 
                  </div> 
            </el-form-item>
            <el-form-item label="详细地址" prop="detailAddress">
                <el-input  v-model="updateMerchantForm.detailAddress"></el-input>
            </el-form-item>
            
        </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelSave('rulesForm')">取 消</el-button>
                <el-button type="primary" @click="saveEdit('rulesForm')">保存</el-button>
            </div>
      </el-dialog>

       <!-- <el-dialog
        title="提示认证信息"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form ref="updateMerchantForm" :model="updateMerchantForm" label-width="80px" :rules="rules_detail" >
            <el-form-item  label="店铺名称" prop="merchantStore">
                <el-input  v-model="updateMerchantForm.merchantName" ref="farmName"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="relativeMan">
                <el-input  v-model="updateMerchantForm.linkMan"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="linkTel">
                <el-input v-model="updateMerchantForm.tel" @blur="tel(updateMerchantForm.tel)"></el-input>
            </el-form-item>
            <el-form-item label="邀请码" prop="inviteCode">
                <el-input  v-model="updateMerchantForm.inviteCode"></el-input>
            </el-form-item>
            <el-form-item label="地区" prop="area">
                  <div class="areaBox" style="display:inline-block;padding-top:8px;height:34px;">
                     <area-select :level="2" v-model="updateMerchantForm.selected" :data="$pcaa" :value="updateMerchantForm.selected"></area-select> 
                  </div> 
            </el-form-item>
            <el-form-item label="详细地址" prop="detailAddress">
                <el-input  v-model="updateMerchantForm.detailAddress"></el-input>
            </el-form-item>
            
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="sure()">确 定</el-button>
        </span>
       </el-dialog> -->
  </div>
</template>

<script>
import { merchant_detail,merchantUpdata,merchantInvoteCode } from '@/request/api'
import { fmoney } from '@/assets/js/common'
export default {
    data(){
        var checkBlank = (rule, value, callback) => {
            if (/(^\s+)|(\s+$)|\s+/g.test(value)) {
                callback(new Error('请不要输入空格'));
            }else {
                callback()
            } 
        };
        var checkInviteCode = (rule, value, callback) => {
            merchantInvoteCode({
              inviteCode:value
            }).then(res=>{
              if(res.code==0){
                callback(new Error('邀请码不存在'));
              }else{
                callback()
              }
              //   console.log(res)
          })

            // if (/(^\s+)|(\s+$)|\s+/g.test(value)) {
            //     callback(new Error('邀请码不存在'));
            // }else {
            //     callback()
            // } 
        };
        return {
           merchantInfo:{}, // 基础信息
           merchantPayMoney:'', // 购买支出
           merchantRecharge:'', // 钱包充值
           MerchantBuyAmount:'', // 购买量
           defaultReceiveList:[], // 默认地址
           notDefaultReceiveList:[], // 非默认地址 
           dialogVisible: false,//点击修改的对话框,
             options:[1,2.3],
             value:1,
             updateMerchantForm:{
                 merchantName:'',//店铺名
                 linkMan:'',//联系人
                 tel:'',//联系电话
                 selected:[],//地区
                 detailAddress:'',//详细地址
                 inviteCode:'',//邀请码
             }, // 修改信息form 表单
             //表单的样式限制
             rules:{
                merchantName: [
                    { required: true, message: '店铺名不能为空', trigger: 'blur' },
                     { validator: checkBlank, trigger: 'blur' }
                ],
                linkMan: [
                     { required: true, message: '联系人不能为空', trigger: 'blur' },
                     { validator: checkBlank, trigger: 'blur' }
                ],
                
                tel: [
                    {  required: true, message: '联系电话不能为空', trigger: 'change' },
                    { pattern:/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57]|19[89])[0-9]{8}$/, message: '手机号格式不对', trigger: 'blur'}
                  
                ],
                inviteCode: [
                    {validator: checkInviteCode,  trigger: 'blur' }
                ],
                selected:[
                    {required:true,message:'地区不能为空',trigger:'change'}
                ],
                detailAddress:[
                    {required:true,message:'详细地址不能为空',trigger:'change'},
                    
                ]
           
             },
        }
    },
    created(){
        this.get_merchant_detail();
    },
    methods:{
        // 获取详情页的列表
        get_merchant_detail(){
            merchant_detail({
                id:this.$route.params.id
            }).then(res => {
                this.merchantInfo = res.merchantInfo;
                this.merchantInfo.balance =fmoney(res.merchantInfo.balance,2);
                this.merchantPayMoney = fmoney(res.merchantPayMoney,2 ) ;
                this.merchantRecharge = fmoney(res.merchantRecharge,2 );
                 this.MerchantBuyAmount = res.MerchantBuyAmount;
                 this.defaultReceiveList = res.defaultReceiveList;
                 this.notDefaultReceiveList = res.notDefaultReceiveList;
                console.log(res);
            })
        },
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //点击修改  
      merchantUpdata(){
        this.dialogVisible= !this.dialogVisible;
        this.updateMerchantForm.merchantName=this.merchantInfo.merchantName;
        this.updateMerchantForm.linkMan=this.merchantInfo.linkMan;
        this.updateMerchantForm.tel=this.merchantInfo.tel;
        // 地区
        this.updateMerchantForm.selected=[this.merchantInfo.provinceId.toString(),this.merchantInfo.cityId.toString(),this.merchantInfo.districtId.toString()];
        this.updateMerchantForm.detailAddress=this.merchantInfo.detailAddress;
        this.updateMerchantForm.inviteCode=this.merchantInfo.inviteCode;
      },
    //   updateInviteCode(code){
    //       console.log(code)
    //       merchantInvoteCode({
    //           inviteCode:code
    //       }),then(res=>{
    //           if(res.code==0){
    //             this.$message('邀请码不存在');
    //           }
    //         //   console.log(res)
    //       })
          

    //   },

      //点击取消   
       cancelSave(formName){
           this.dialogVisible = false;
           this.$refs[formName].resetFields();    
      },
      
    //修改里面的确定
    //   sure(){
    //      this.dialogVisible=!this.dialogVisible;
    //      merchantUpdata({
    //            id:this.$route.params.id,
    //            tel:this.updateMerchantForm.tel,
    //            provinceId:this.updateMerchantForm.selected[0],
    //            cityId:this.updateMerchantForm.selected[1],
    //            districtId:this.updateMerchantForm.selected[2],
    //            address:this.updateMerchantForm.detailAddress,
    //            merchName:this.updateMerchantForm.merchantName,
    //            linkMan:this.updateMerchantForm.linkMan,
    //            inviteCode:this.updateMerchantForm.inviteCode,

    //      }).then(res=>{
    //          console.log(res)
    //          if(res.code == 1){
    //                 this.$message.success('修改成功');
    //                 this.get_merchant_detail();
    //          }
    //      })

    //   },
    // 点击保存
      saveEdit(formName){
          this.$refs[formName].validate((valid) => {
            console.log(valid,this.updateMerchantForm.inviteCode);
          if (valid) {
            this.dialogVisible=!this.dialogVisible;
            merchantUpdata({
                id:this.$route.params.id,
                tel:this.updateMerchantForm.tel,
                provinceId:this.updateMerchantForm.selected[0],
                cityId:this.updateMerchantForm.selected[1],
                districtId:this.updateMerchantForm.selected[2],
                address:this.updateMerchantForm.detailAddress,
                merchName:this.updateMerchantForm.merchantName,
                linkMan:this.updateMerchantForm.linkMan,
                inviteCode:this.updateMerchantForm.inviteCode,

            }).then(res=>{
                console.log(res)
                if(res.code == 1){
                    this.$message.success('修改成功');
                    this.get_merchant_detail();
                }
            }) 
          } else {
                console.log('error submit!!');
                return false;
          }
        })
      },
      
     }
    
 }
</script>
<style  scoped>
.merchant_detail > h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}
.container {
    line-height:50px;
    border-radius: 0;
}
.container h4 {
    background-color: #eee;
    line-height: 50px;
    font-weight: 400;
    font-size:16px;
    padding-left:30px;
    color: #999;

}
.container .info {
    display: flex;
    padding: 0  30px;
    
}
.container .info  div {
    margin-right:100px;
}
.store_info ul li {
    border-bottom:  1px solid #eee;
}
.store_info ul li:nth-last-child(1) {
    border-bottom: 0;
}
.info_left{
  float:left;
  width:10%;
  text-align: center;
}
.info_left>img{
  margin:25px 0;
}
.info_right{
    float:right;
    width:90%;
    margin-top:15px;
}
.info_right>div{
    width:28%;
    float:left;
}
</style>